<template>
  <div class="chart-inst"></div>
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import * as d3 from "d3";

@Component({
  name: "ChartScale",
  components: {}
})
export default class ChartScale extends Vue {
  @Prop()
  private option!: ComplexScaleColumn;

  @Prop()
  private range!: [number, number];

  @Prop({
    required: true
  })
  private ticks!: ComplexTickCconfig;

  private svg!: d3.Selection<any, any, any, any>;

  private h!: number;
  private w!: number;

  private scale!: d3.ScaleLinear<any, any, any>;

  @Watch("option", { immediate: true })
  onOptionEntry() {
    this.$nextTick(() => {
      this.start();
    });
  }

  start() {
    this.$el.innerHTML = "";

    const rect = this.$el.getBoundingClientRect();
    this.h = rect.height;
    this.w = rect.width;

    this.scale = d3.scaleLinear().range([0, this.h]).domain(this.range).nice();

    this.svg = d3
      .select(this.$el)
      .append("svg")
      .attr("width", this.w)
      .attr("height", this.h);

    const axis = d3
      .axisRight(this.scale)
      .ticks(this.ticks.total || 20)
      .tickFormat((d: any) => {
        return d % (this.ticks.formatStep || 200) === 0 ? d : "";
      });

    const g = this.svg.append("g");
    g.call(axis);
  }
}
</script>
<style lang="scss" scoped>
.chart-inst {
  width: 100%;
  height: 100%;
  ::v-deep {
    text {
      font-size: 14px;
    }
  }
}
</style>
